<template>
    <div>
      <el-menu class="mailbox-sidebar-menu" default-active="inbox" >
        <div class="menu-others">
          <el-button @click="handleWrite">写信</el-button>
          <el-button @click="handleReceive">收信</el-button>
          <el-button @click="handleContact">通讯录</el-button>
        </div>
        <p>文件夹</p>
        <el-menu-item
            v-model="folderId"
            v-for="folder in folders"
            :key="folder.folderId"
            :index="folder.folderId"
            class="menu-item"
            @click="handleFolderClick(folder.folderId)"
            @mouseover="handleFolderHover(folder.folderId)"
            @mouseleave="handleFolderLeave"
        >
          {{ folder.folderName}}
        </el-menu-item>
      </el-menu>
        <!-- 假设你已经有了显示文件夹列表的逻辑 -->
      <!-- 显示邮件列表的Element UI表格 -->
<!--      两个组件，一个用于显示文件夹列表，一个用于显示邮件列表-->
    </div>

</template>

<script>
import axios from "axios";
import async from "async";
import {mapActions, mapGetters, mapState} from "vuex";

export default {
  name:'MailboxSidebar',
  data() {
    return {
      folderId: null, // 文件夹ID，这里你需要从其他地方获取，比如用户选择
      folders:[]
    };

  },
  created() {
    //先获取folder再获取email
    this.getFolderList();


//异步创建一个异步任务，当folderId不为空时，执行getEmailList()

  },
  computed:{
    ...mapState(['folders','user'])

  },
  methods: {
    ...mapActions(['replaceComponent']),
    async getFolderList() {
    await  axios.get('http://localhost:8989/email/folder')
          .then((response) => {
            console.log(response.data);
            this.folders = response.data;


          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleWrite(){
      console.log("write");
      // this.$emit('switch2');
      this.$emit('go-to-write');
      if (this.$route.name !== 'MailWrite') {
        console.log("调用mailboxwrite");
        const componentName = 'MailWrite';
        this.replaceComponent(componentName);
        this.$router.push({ name: 'MailWrite'});
      }

    },
    handleReceive(){
      this.$confirm('此操作将接收所有邮件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('http://localhost:8989/email/receive',{params:{
            userId: this.user.userId,
            userName: this.user.userName,
            userPass: this.user.userPass
          }})
            .then((response) => {
              console.log(response.data);
              this.$message({
                type: 'success',
                message: '获取邮件成功!'
              });
              this.getEmailList();
              if(this.$route.name !== 'MailboxList'&& this.$route.params.folderId !== 2){
                this.$router.push({ path:'/mailboxList/2'});
              }
              this.$router.go(0);
            }).catch((error) => {
          console.error(error);
          // this.$message.error('获取邮件失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });



    },
    handleContact(){
      console.log("contact");
      // this.$emit('switch2');
      this.$emit('go-to');
      if (this.$route.name !== 'ContactList') {
        console.log("调用mailboxlist");
        const componentName = 'ContactList';
        this.replaceComponent(componentName);
        this.$router.push({ name: 'ContactList'});
      }

    },
    handleFolderClick(folder){
      this.folderId = folder;//创建保存文件夹id
      console.log("updateFolderId  "+folder)
      this.$store.commit('updateFolderId',folder);
      this.$emit('row-clicked', folder);
      if (this.$route.name !== 'MailboxList' || this.$route.params.folderId !== folder) {
        // if(this.folderId!==6){
          console.log("调用mailboxlist");
          const componentName = 'MailboxList';
          this.replaceComponent(componentName);
          this.$router.push({ name: 'MailboxList',params: { folderId: folder }});
        // }else {
        //   console.log("调用starlist");
        //   const componentName = 'StarList';
        //   this.replaceComponent(componentName);
        //   this.$router.push({ name: 'StarList',params: { folderId: folder }});
        // }


      }

     },

    handleFolderHover(folderId) {
      console.log("HoverfolderId"+folderId)
      this.$emit('folder-selected', folderId); // 发射事件到父组件
    },
    // handleFolderLeave() {
    //   this.$emit('folder-left'); // 当鼠标离开文件夹时，通知父组件
    // },0.

  },

  watch:{
    folderId(newVal){
      this.updateFolderId(newVal);
    },
  }
};
</script>

<style scoped>
.mailbox-sidebar-menu {
  background-color: #f5f7fa;
  width: 250px;
  text-align: center;
  font-size:25px;
  /* 侧边栏菜单样式 */
}
.menu-others {

  margin: 10px;
  display: flex;
  flex-direction: column; /* 指定主轴方向为列 */
  align-items: stretch;
}
.menu-others::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 2px; /* 实线的宽度 */
  background-color: #ccc; /* 实线的颜色 */
}
.menu-others .el-button {
  margin: 10px 0; /* 上下边距为10px，左右边距为0 */
  border: none;

  border-bottom: 3px double #ccc;
  /* 其他样式 */
}
.menu-others .el-button:first-child {
  //margin-top: 1px; /* 第一个按钮不需要上边距 */
}
.menu-item{
  border-bottom: 1px solid #ccc;
}
.menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 2px; /* 实线的宽度 */
  background-color: #ccc; /* 实线的颜色 */
}
.menu-others .el-button:last-child {
  margin-bottom: 0; /* 最后一个按钮不需要下边距 */
}
</style>